<template>
  <div class="dashboard-container">
    <el-card class="welcome-card">
      <div class="welcome-content">
        <h2>欢迎回来，{{ userName }}</h2>
        <p class="subtitle">{{ greeting }}，今天是 {{ currentDate }}</p>
      </div>
    </el-card>

    <!-- 数据概览卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon health">
              <el-icon><DataAnalysis /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ healthDataCount }}</div>
              <div class="stat-label">健康记录</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon emergency">
              <el-icon><WarningFilled /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ emergencyCallCount }}</div>
              <div class="stat-label">紧急呼叫</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon service">
              <el-icon><Ticket /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ serviceAppointmentCount }}</div>
              <div class="stat-label">服务预约</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon family">
              <el-icon><UserFilled /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ familyRelationCount }}</div>
              <div class="stat-label">家属关系</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="charts-row">
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>健康数据趋势</span>
            </div>
          </template>
          <div class="chart-container">
            <el-empty description="暂无健康数据" v-if="!showCharts" />
            <div v-else id="healthChart" ref="healthChartRef"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>待处理事项</span>
            </div>
          </template>
          <div class="pending-list">
            <el-empty description="暂无待处理事项" v-if="pendingItems.length === 0" />
            <el-timeline :reverse="false">
              <el-timeline-item
                v-for="item in pendingItems"
                :key="item.id"
                :timestamp="item.time"
                :type="item.type === 'emergency' ? 'danger' : 'warning'"
              >
                <div class="timeline-content">
                  <div class="timeline-title">{{ item.title }}</div>
                  <div class="timeline-desc">{{ item.description }}</div>
                  <el-button 
                    v-if="item.actionable" 
                    size="small" 
                    type="primary" 
                    @click="handlePendingItem(item.id, item.type)"
                  >
                    处理
                  </el-button>
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import { DataAnalysis, WarningFilled, Ticket, UserFilled } from '@element-plus/icons-vue';

// 模拟数据，实际应用中应该从API获取
const healthDataCount = ref(24);
const emergencyCallCount = ref(3);
const serviceAppointmentCount = ref(8);
const familyRelationCount = ref(5);
const showCharts = ref(false);
const healthChartRef = ref<HTMLElement>();

// 获取用户信息
let userInfo = {};
try {
  const userInfoStr = localStorage.getItem('user');
  if (userInfoStr) {
    userInfo = JSON.parse(userInfoStr);
  }
} catch (e) {
  console.error('用户信息解析失败:', e);
  userInfo = {};
}

// 计算用户名称
const userName = computed(() => userInfo.name || '用户');

// 计算问候语
const greeting = computed(() => {
  const hour = new Date().getHours();
  if (hour < 6) return '凌晨好';
  if (hour < 9) return '早上好';
  if (hour < 12) return '上午好';
  if (hour < 14) return '中午好';
  if (hour < 18) return '下午好';
  if (hour < 22) return '晚上好';
  return '夜深了';
});

// 计算当前日期
const currentDate = computed(() => {
  const now = new Date();
  const year = now.getFullYear();
  const month = (now.getMonth() + 1).toString().padStart(2, '0');
  const day = now.getDate().toString().padStart(2, '0');
  const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
  const weekDay = weekDays[now.getDay()];
  return `${year}年${month}月${day}日 ${weekDay}`;
});

// 待处理事项
interface PendingItem {
  id: string;
  title: string;
  description: string;
  time: string;
  type: 'emergency' | 'service' | 'family';
  actionable: boolean;
}

const pendingItems = ref<PendingItem[]>([
  {
    id: '1',
    title: '紧急呼叫待处理',
    description: '张老先生在卧室发起了紧急呼叫，需要立即处理',
    time: '10:30',
    type: 'emergency',
    actionable: true
  },
  {
    id: '2',
    title: '服务预约待确认',
    description: '李女士为父亲申请了上门体检服务',
    time: '昨天 14:20',
    type: 'service',
    actionable: true
  },
  {
    id: '3',
    title: '家属关系待确认',
    description: '王先生申请成为赵老先生的家属',
    time: '昨天 09:15',
    type: 'family',
    actionable: true
  }
]);

// 处理待处理事项
const handlePendingItem = (_id: string, type: string) => {
  // 根据类型跳转到相应页面
  switch (type) {
    case 'emergency':
      ElMessage.info('跳转到紧急呼叫处理页面');
      break;
    case 'service':
      ElMessage.info('跳转到服务预约确认页面');
      break;
    case 'family':
      ElMessage.info('跳转到家属关系确认页面');
      break;
  }
};

// 初始化页面
onMounted(async () => {
  await nextTick();
  // 实际应用中，这里应该调用API获取真实数据
  // 模拟数据加载
  setTimeout(() => {
    showCharts.value = true;
    // 实际应用中，这里应该初始化图表
  }, 500);
});
</script>

<style scoped>
.dashboard-container {
  padding-bottom: 20px;
}

.welcome-card {
  margin-bottom: 20px;
}

.welcome-content h2 {
  margin: 0 0 10px 0;
  color: #303133;
}

.subtitle {
  color: #606266;
  margin: 0;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-content {
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  font-size: 24px;
  color: #fff;
}

.stat-icon.health {
  background-color: #67c23a;
}

.stat-icon.emergency {
  background-color: #f56c6c;
}

.stat-icon.service {
  background-color: #e6a23c;
}

.stat-icon.family {
  background-color: #409eff;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: #606266;
  margin-top: 8px;
}

.charts-row {
  margin-bottom: 20px;
}

.chart-card {
  height: 400px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  height: calc(100% - 55px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pending-list {
  height: calc(100% - 55px);
  overflow-y: auto;
}

.timeline-content {
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.timeline-title {
  font-weight: bold;
  margin-bottom: 5px;
}

.timeline-desc {
  color: #606266;
  font-size: 14px;
  margin-bottom: 10px;
}
</style>